<template>
  <aside class="btn-box">
    <el-row :gutter="10">
      <el-col :span="2">
        <el-button type="primary" size="mini" icon="el-icon-circle-plus-outline" @click="addNewproduct">新增</el-button>
        <product-info ref="addNew" @reloadFun="reloadFun" />
      </el-col>
      <el-col :span="2">
        <el-button type="primary" size="mini" icon="el-icon-search" @click="searchFun">检索</el-button>
        <search-dialog ref="searchDialog" @search="searchReturn" />
      </el-col>
      <el-col :span="2">
        <el-button v-permission="['admin']" type="primary" size="mini" icon="el-icon-download" @click="downloadFun">导出</el-button>
      </el-col>
      <el-col :span="5">
        <el-radio v-model="status" label="1" @change="statusChange">正常</el-radio>
        <el-radio v-model="status" label="2" @change="statusChange">已下架</el-radio>
      </el-col>
    </el-row>
  </aside>
</template>

<script>
import productInfo from './product-info'
import searchDialog from './search'
import permission from '@/directive/permission'
export default {
  directives: {
    permission
  },
  components: {
    productInfo,
    searchDialog
  },
  data() {
    return {
      status: '1'
    }
  },
  methods: {
    addNewproduct() {
      this.$refs.addNew.dialogFormVisible = true
    },
    reloadFun() {
      this.$emit('reloadFun')
    },
    downloadFun() {
      this.$emit('download')
    },
    searchFun() {
      this.$refs['searchDialog'].dialogFormVisible = true
    },
    searchReturn(val) {
      this.$emit('search', val)
    },
    statusChange(Val) {
      console.log(Val)
      this.$emit('upDown', Val)
    }
  }
}
</script>

<style lang="sass" scoped>

</style>
